<template>
  <div class="app-container" style="width: 40%">
    <el-form ref="form" :model="drivingRecord" label-width="80px" :rules="rules">
      <el-form-item label="车辆号码">


        <el-select v-model="drivingRecord.carId" placeholder="选择车牌号码" label-width="80px" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
          <el-option
            v-for="item in carNo1"
            :key="item.id"
            :label="item.carNo"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="驾驶员">
        <el-select v-model="drivingRecord.driverId" placeholder="选择驾驶员" label-width="80px" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
          <el-option
            v-for="item in driver"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="出车时间" >
        <div class="block"  label-width="80px"   v-model="drivingRecord.beginTime">
          <el-date-picker
            :picker-options="pickerOptionsStart"
            v-model="drivingRecord.beginTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="回车时间"  prop="backtime">
        <div class="block"  label-width="80px"   v-model="drivingRecord.backtime">
          <el-date-picker
            :picker-options="pickerOptionsEnd"
            v-model="drivingRecord.backtime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="开始里程">
        <el-input v-model="drivingRecord. startMil" :readonly="drivingRecord.startMil"></el-input>
      </el-form-item>

      <el-form-item label="回车里程" prop="returnMil">
        <el-input v-model="drivingRecord.returnMil"></el-input>
      </el-form-item>

      <el-form-item label="停放位置" prop="parkPlace">
        <el-input v-model="drivingRecord.parkPlace" ></el-input>
      </el-form-item>

      <el-form-item label="备注"  prop="remarks">
        <el-input v-model="drivingRecord.remarks "  ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="success"   @click="saveOrUpdate('form')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

  <style >


  </style>
<script>
//-- 导入api
import carApi from "@/api/rao_car.js";
import driverApi from "@/api/rao_driver.js";
//-- 引入组件
import ImageCropper from "@/components/ImageCropper";
import PanThumb from "@/components/PanThumb";
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        phone:'',

      },
      rules: {

        returnMil: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 1, max: 5, trigger: 'blur'}
        ],
        parkPlace: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 1, max: 10, trigger: 'blur'}
        ],
        remarks: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 1, max: 3, trigger: 'blur'}
        ],
        startMil: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 1, max: 5, trigger: 'blur'}
        ],
        maintainPeriod: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 1, max: 5, trigger: 'blur'}
        ],
        maintainMill: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 1, max: 5, trigger: 'blur'}
        ],
        frameNum: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 1, max: 5, trigger: 'blur'}
        ],
        engineNum: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 4, max: 7, trigger: 'blur'}
        ],
        carId: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        backtime: [
          {required: true, message: '请选择日期', trigger: 'change'}
        ],
        preBacktime: [
          {required: true, message: '请选择时间', trigger: 'change'}
        ],
        deptId: [
          { required: true, message: '请选择部门', trigger: 'change'}
        ],
        driverId: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        carColor: [
          {required: true, message: '请填写', trigger: 'blur'}
        ],
        supId: [
          {required: true, message: '请填写', trigger: 'blur'}
        ],
      },
      carNo1:{},
      super1:{},
      dept:{},
      state:{},
      driver:{},

      drivingRecord: {
        carId: '',
        deptId: '',
        beginTime: '',
        personnel:'',
        driverId:'',
        destination:'',
        reason:'',
        startMil:'',
        returnMil:'',
        parkPlace:'',
        remarks:'',
        backtime:'',
      },
      createDate: new Date().getTime(),
      // 开始时间限制
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.drivingRecord.backtime) {
            // eslint-disable-next-line max-len
            return time.getTime() > new Date(this.drivingRecord.backtime).getTime() || time.getTime() <= new Date(this.createDate).getTime() - 86400000;
          }
          return time.getTime() <= new Date(this.createDate).getTime() - 86400000;
        },
      },

      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.drivingRecord.beginTime) {
            return time.getTime() < new Date(this.drivingRecord.beginTime).getTime();
          }
          return time.getTime() <= new Date(this.createDate).getTime() - 86400000;
        },
      },

    };
  },
  created() {
    this.init();
    //获取所有的供应商
    //获取所有部门
    this.getDeptById();
    this.getCarNo();
    this.getDriver();

  },
  watch: {
    //-- 监听路由是否有发生变化
    $route(to, form) {
      this.init();
    },
  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id;
        this.getDriverRecordById(id);
      } else {
        this.drivingRecord = {};
      }
    },
    //-- 保存和更新是同一个页面，那form表单的提交方法
    saveOrUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.drivingRecord.id) {
            this.saveDrivingRecord();
          } else {
            this.updateDrivingRecord();
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //-- 单纯保存的方法
    saveDrivingRecord() {
      carApi.saveDrivingRecord(this.drivingRecord).then((response) => {
        //-- 弹出保存成功的确认框
        this.$message({
          message: "添加成功",
          type: "success",
        });
        //-- 页面跳转到列表页面  利用路由跳转页面
        this.$router.push({ path: "/daily_work/driving_record" });
      });
    },
    //-- 单纯修改的方法
    updateDrivingRecord() {
      carApi.updateDriverRecordBack(this.drivingRecord).then((response) => {
        //-- 弹出保存成功的确认框
        this.$message({
          message: "修改成功",
          type: "success",
        });
        //-- 页面跳转到列表页面  利用路由跳转页面
        this.$router.push({ path: "/daily_work/driving_record" });
      });
    },

    getDriverRecordById(id) {
      carApi.findDriverRecordById(id).then((response) => {
        this.drivingRecord = response.data.items;
      });
    },

    //获得所有的部门
    getDeptById(){
      driverApi.getDept().then((response) => {
        this.dept = response.data.dept;
      })
    },

    //获得所有车辆的状态
    getState(){
      carApi.getDicById(35).then((response)=>{
        //通过品牌id来获取对应的text
        this.state=response.data.items;
      })
    },
    //获取未出车的车辆信息
     getCarNo(){
      carApi.getCarNo().then((response)=>{
         //通过品牌id来获取对应的text
         this.carNo1=response.data.items;
       })
     },
    getDriver(){
      carApi.getDriver().then((response)=>{
        //通过品牌id来获取对应的text
        this.driver=response.data.items;
      })
    },


  },
};
</script>
<style>
</style>
